<template>
  <el-dialog
    :title="titleText"
    :visible.sync="dialogVisible"
    width="30%"
    @close="close"
  >
    <el-form
      :model="addForm"
      status-icon
      :rules="addFormRules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="所属学科" v-if="!isFromSubjectInto">
        <el-select v-model="addForm.subjectID" placeholder="请选择">
          <el-option
            v-for="item in subjectSimpleList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="目录名称" prop="directoryName">
        <el-input v-model="addForm.directoryName"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="addOrEdit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "DirectoryAdd",
  props: {
    title: {
      type: String,
    },
    subjectSimpleList: {
      type: Array,
    },
    subjectIDD: {
      type: Number,
    },
    // 传来的id
    fromsubjectID:{
      type:Number
    },

    directoryNameF: {
      type: String,
    },
    isFromSubjectInto: {
      type: Boolean,
    },
  },
  data() {
    return {
      // 对话框的显示状态
      dialogVisible: true,
      // 表单的绑定对象
      addForm: {
        directoryName: "",
        subjectID: null,
        type: this.title,
      },
      // 添加目录表单 验证规则 对象
      addFormRules: {
        directoryName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 点击确定事件
    addOrEdit() {
      // console.log(this.title);
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        if (!valid) {
          return false;
        }
        if (this.title === "add") {
          // 父传子 传数据
          this.$emit("addDirectory", this.addForm);
        } else {
          this.$emit("editDirectoryFather", this.addForm);
        }
      });
    },

    // 点击取消事件
    cancel() {
      this.$emit("canelDialog");
    },

    // 对话框 关闭事件
    close() {
      this.$emit("canelDialog");
    },
  },
  computed: {
    // 根据类型 动态显示标题
    titleText() {
      if (this.title === "add") {
        this.addForm.subjectID = this.fromsubjectID;
        return "新增目录";
      } else {
        this.addForm.subjectID = this.subjectIDD;
        this.addForm.directoryName = this.directoryNameF;
        return "修改目录";
      }
    },
  },
};
</script>

<style scoped>
.el-select >>> .el-input__inner {
  width: 320.8px;
  /* width: 100%; */
}
</style>
